<!-- 司机详情 -->
<template>
  <div class="dashboard-container driver-detail">
    <div class="app-container">
      <el-card
        shadow="never"
        style="height: 1080px;"
      >
        <el-tabs v-model="activeName">
          <el-tab-pane
            label="基本信息"
            name="first"
          >
            <el-form
              ref="driverDetailForm"
              :model="driverDetailForm"
              label-width="80px"
              label-position="left"
            >
              <el-col :span="8">
                <el-form-item label="员工编号">
                  <span v-show="driverDetailState === 0">{{ driverDetailForm.userId }}</span>
                  <el-input
                    v-show="driverDetailState === 1"
                    v-model="driverDetailForm.userId"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="司机姓名">
                  <span v-show="driverDetailState === 0">{{ driverDetailForm.name }}</span>
                  <el-input
                    v-show="driverDetailState === 1"
                    v-model="driverDetailForm.name"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所属机构">
                  <span v-show="driverDetailState === 0">{{ driverDetailForm.agency.name }}</span>
                  <el-input
                    v-show="driverDetailState === 1"
                    v-model="driverDetailForm.agency.name"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机号">
                  <span v-show="driverDetailState === 0">{{ driverDetailForm.mobile }}</span>
                  <el-input
                    v-show="driverDetailState === 1"
                    v-model="driverDetailForm.mobile"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="年龄">
                  <span v-show="driverDetailState === 0">{{ driverDetailForm.age }}</span>
                  <el-input
                    v-show="driverDetailState === 1"
                    v-model="driverDetailForm.age"
                    style="width: 47.3%;"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-form>
            <div
              class="btnBox"
              style="text-align: center;"
            >
              <el-button
                v-show="driverDetailState === 0"
                type="warning"
                @click="driverDetailState = 1"
              >编辑</el-button>
              <el-button
                v-show="driverDetailState === 1"
                type="warning"
                @click="driverDetailState = 0"
              >取消</el-button>
              <el-button
                v-show="driverDetailState === 1"
                type="warning"
                @click="updateDriverDetail"
              >保存</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="驾驶证信息"
            name="second"
          >
            <el-form
              ref="driverLicenseForm"
              :model="driverLicenseForm"
              label-width="100px"
              label-position="left"
            >
              <el-col :span="8">
                <el-form-item label="驾驶证号">
                  <span v-show="driverLicenseState === 0">{{ driverLicenseForm.licenseNumber }}</span>
                  <el-input
                    v-show="driverLicenseState === 1"
                    v-model="driverLicenseForm.licenseNumber"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="准驾车型">
                  <span v-show="driverLicenseState === 0">{{ driverLicenseForm.allowableType }}</span>
                  <el-input
                    v-show="driverLicenseState === 1"
                    v-model="driverLicenseForm.allowableType"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="初次领证日期">
                  <span v-show="driverLicenseState === 0">{{ driverLicenseForm.initialCertificateDate }}</span>
                  <el-date-picker
                    v-show="driverLicenseState === 1"
                    v-model="driverLicenseForm.initialCertificateDate"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="有效期限">
                  <span v-show="driverLicenseState === 0">{{ driverLicenseForm.validPeriod }}</span>
                  <el-input
                    v-show="driverLicenseState === 1"
                    v-model="driverLicenseForm.validPeriod"
                  >
                    <template slot="suffix">年</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="驾龄">
                  <span v-show="driverLicenseState === 0">{{ driverLicenseForm.driverAge }}</span>
                  <el-input
                    v-show="driverLicenseState === 1"
                    v-model="driverLicenseForm.driverAge"
                  >
                    <template slot="suffix">年</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="驾驶证类型">
                  <span v-show="driverLicenseState === 0">{{ driverLicenseForm.licenseType }}</span>
                  <el-input
                    v-show="driverLicenseState === 1"
                    v-model="driverLicenseForm.licenseType"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="从业资格证">
                  <span v-show="driverLicenseState === 0">{{ driverLicenseForm.qualificationCertificate }}</span>
                  <el-input
                    v-show="driverLicenseState === 1"
                    v-model="driverLicenseForm.qualificationCertificate"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="入场证信息">
                  <span v-show="driverLicenseState === 0">{{ driverLicenseForm.passCertificate }}</span>
                  <el-input
                    v-show="driverLicenseState === 1"
                    v-model="driverLicenseForm.passCertificate"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="图片信息">
                  <el-upload
                    v-show="driverLicenseState === 1"
                    class="upload-demo"
                    list-type="picture-card"
                    action="#"
                    :http-request="uploaddriverLicense"
                    :before-upload="beforeUpload"
                  >
                    <i class="el-icon-plus"></i>
                    <div
                      slot="tip"
                      class="el-upload__tip"
                    >注：图片大小不超过5M；仅能上传 PNG JPEG JPG类型图片；建议上传400*300尺寸的图片；最多上传2张</div>
                  </el-upload>
                  <img
                    v-if="driverLicenseState === 0"
                    :src="driverLicenseForm.picture"
                    alt=""
                    class="businessLicenseUrl"
                  >
                </el-form-item>
              </el-col>
            </el-form>
            <div
              class="btnBox"
              style="text-align: center;"
            >
              <el-button
                v-show="driverLicenseState === 0"
                type="warning"
                @click="driverLicenseState = 1"
              >编辑</el-button>
              <el-button
                v-show="driverLicenseState === 1"
                type="warning"
                @click="driverLicenseState = 0"
              >取消</el-button>
              <el-button
                v-show="driverLicenseState === 1"
                type="warning"
                @click="updateDriverDetail"
              >保存</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>
<script>
import { driverDetail, driverDetailUpdate, driverLicenseDetail, imgUpload, driverLicenseDetailUpdate } from '@/api/transit'
export default {
  data () {
    return {
      activeName: 'first',
      driverDetailState: 0,
      driverLicenseState: 0,
      driverDetailForm: {},
      driverLicenseForm: {}
    }
  },
  mounted () {
    this.getDriverDetail()
    this.getDriverLicenseDetail()
  },
  methods: {
    async getDriverDetail() {
      const res = await driverDetail(this.$route.query.id)
      this.driverDetailForm = res.data
    },
    async updateDriverDetail() {
      const res = await driverDetailUpdate(this.$route.query.id, this.driverDetailForm)
      if (res.code === 200) {
        this.$message.success('更新成功')
        this.getDriverDetail()
        this.driverDetailState = 0
      } else {
        this.$message.warning(res.msg)
      }
    },
    beforeUpload(file) {
      const isPNGorJPG = file.type === ('image/png' || 'image/jpg' || 'image/jpeg')
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isPNGorJPG) {
        this.$message.error('上传的文件只能是 PNG、JPG、JPEG 格式!')
      }
      if (!isLt5M) {
        this.$message.error('上传的文件大小不能超过 5MB!')
      }
      return isPNGorJPG && isLt5M
    },
    async uploaddriverLicense(res) {
      // file：要上传给后端接口的文件对象
      const { file } = res
      // 上传文件
      // 1.按照接口要求准备一个符合类型的formData对象 然后把参数加入进去
      const fd = new FormData() // FormData实例对象，内部是空的
      fd.append('file', file)
      // 2.调用接口
      const _res = await imgUpload(fd)
      this.driverLicenseForm.picture = _res.data
    },
    async getDriverLicenseDetail() {
      const res = await driverLicenseDetail(this.$route.query.id)
      this.driverLicenseForm = res.data
    },
    async updateDriverLicense() {
      const res = await driverLicenseDetailUpdate(this.driverLicenseForm)
      if (res.code === 200) {
        this.$message.success('更新成功')
        this.driverLicenseState = 0
        this.getDriverLicenseDetail()
      } else {
        this.$message.warning(res.msg)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.active {
  color: #ff643d;
}
</style>

<style lang="scss" scoped>
.driver-detail {
    ::v-deep .el-container{
    flex-direction: column;
    margin-left: 0px;

  }
  .in{
    height: calc(100vh - 205px);
  }
  .aside-box {
    background: #ffffff;
    border-radius: 4px;
    padding: 24px 37px 24px 37px;
    box-sizing: border-box;
    ::v-deep .el-aside {
      padding-bottom: 14px;
      width: 100%!important;
      display: flex;
      background-color: #ffffff;
      border-bottom:1px solid #E5E7EC ;
      text-align: left;
      font-size: 14px;
      .aside-item {
        cursor: pointer;
        &:first-child {
          margin-right: 53px;
          padding-left: 25px;

        }
      }
      .aside-item.active{
        font-size: 16px;
        font-weight: bold;
        color: #20232A;
        &:after{
          content: '';
          display: block;
          background-color:#E15536 ;
          height: 3px;
          width: 49px;
          margin: 0 auto;
          position: relative;
          top: 14px;
        }
      }
    }
  }
}

::v-deep .el-tabs__item {
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #4E5969;
    line-height: 24px;
    font-weight: 400;
  }

  ::v-deep .is-active {
    font-family: PingFangSC-Semibold;
    font-size: 16px;
    color: #20232A;
    line-height: 24px;
    font-weight: 600;
  }

  ::v-deep .el-tabs__active-bar {
    background: #E15536;
    border-radius: 4px 4px 0px 0px;
  }
</style>
